<template></template>
<script>
import * as echarts from 'echarts'
//0
//0
import router from '@/router/router-static'
export default {
  data() {
    return {
      line: {
        backgroundColor: 'transparent',
        yAxis: {
          axisLabel: {
            borderType: 'solid',
            rotate: 0,
            padding: 0,
            shadowOffsetX: 0,
            margin: 15,
            backgroundColor: 'transparent',
            borderColor: '#000',
            shadowOffsetY: 0,
            color: '#fff',
            shadowBlur: 0,
            show: true,
            inside: false,
            ellipsis: '...',
            overflow: 'none',
            borderRadius: 0,
            borderWidth: 0,
            width: '',
            fontSize: 12,
            lineHeight: 24,
            shadowColor: 'transparent',
            fontWeight: 'normal',
            height: '',
          },
          axisTick: {
            show: true,
            length: 5,
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            inside: false,
          },
          splitLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#ccc',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: true,
          },
          axisLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: true,
          },
          splitArea: {
            show: false,
            areaStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              color: 'rgba(250,250,250,0.3)',
              opacity: 1,
              shadowBlur: 10,
              shadowColor: 'rgba(0,0,0,.5)',
            },
          },
        },
        xAxis: {
          axisLabel: {
            borderType: 'solid',
            rotate: 0,
            padding: 0,
            shadowOffsetX: 0,
            margin: 4,
            backgroundColor: 'transparent',
            borderColor: '#000',
            shadowOffsetY: 0,
            color: '#fff',
            shadowBlur: 0,
            show: true,
            inside: false,
            ellipsis: '...',
            overflow: 'none',
            borderRadius: 0,
            borderWidth: 0,
            width: '',
            fontSize: 12,
            lineHeight: 24,
            shadowColor: 'transparent',
            fontWeight: 'normal',
            height: '',
          },
          axisTick: {
            show: true,
            length: 5,
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            inside: false,
          },
          splitLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: false,
          },
          axisLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: true,
          },
          splitArea: {
            show: false,
            areaStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              color: 'rgba(255,255,255,.3)',
              opacity: 1,
              shadowBlur: 10,
              shadowColor: 'rgba(0,0,0,.5)',
            },
          },
        },
        color: [
          '#7bbfea',
          '#91cc75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#3ba272',
          '#fc8452',
          '#9a60b4',
          '#ea7ccc',
        ],
        legend: {
          padding: 5,
          itemGap: 10,
          shadowOffsetX: 0,
          backgroundColor: 'transparent',
          borderColor: '#ccc',
          shadowOffsetY: 0,
          orient: 'horizontal',
          shadowBlur: 0,
          bottom: 'auto',
          itemHeight: 14,
          show: true,
          icon: 'roundRect',
          borderRadius: 0,
          lineStyle: {
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            color: 'inherit',
            shadowBlur: 0,
            width: 'auto',
            type: 'inherit',
            opacity: 1,
            shadowColor: 'transparent',
          },
          left: 'right',
          borderWidth: 0,
          width: '80%',
          itemWidth: 25,
          textStyle: {
            textBorderWidth: 0,
            color: '#fff',
            textShadowColor: 'transparent',
            ellipsis: '...',
            overflow: 'none',
            fontSize: 12,
            lineHeight: 24,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
            textBorderType: 'solid',
            fontWeight: 500,
            textBorderColor: 'transparent',
            textShadowBlur: 0,
          },
          shadowColor: 'rgba(0,0,0,.3)',
          height: 'auto',
        },
        grid: { left: '100', containLabel: true },
        series: {
          symbol: 'emptyCircle',
          itemStyle: {
            borderType: 'solid',
            shadowOffsetX: 0,
            borderColor: '#fff',
            shadowOffsetY: 0,
            color: '',
            shadowBlur: 0,
            borderWidth: 0,
            opacity: 1,
            shadowColor: '#000',
          },
          showSymbol: true,
          lineStyle: {
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            color: '',
            shadowBlur: 0,
            width: 2,
            type: 'solid',
            opacity: 1,
            shadowColor: '#000',
          },
          symbolSize: 4,
        },
        title: {
          borderType: 'solid',
          padding: 2,
          shadowOffsetX: 0,
          backgroundColor: 'transparent',
          borderColor: '#ccc',
          shadowOffsetY: 0,
          shadowBlur: 0,
          bottom: 'auto',
          show: true,
          right: 'auto',
          top: 'auto',
          borderRadius: 0,
          left: 'left',
          borderWidth: 0,
          textStyle: {
            textBorderWidth: 0,
            color: '#fff',
            textShadowColor: 'transparent',
            fontSize: 14,
            lineHeight: 24,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
            textBorderType: 'solid',
            fontWeight: 500,
            textBorderColor: '#ccc',
            textShadowBlur: 0,
          },
          shadowColor: 'transparent',
        },
      },
      bar: {
        backgroundColor: 'transparent',
        yAxis: {
          axisLabel: {
            borderType: 'solid',
            rotate: 0,
            padding: 0,
            shadowOffsetX: 0,
            margin: 15,
            backgroundColor: 'transparent',
            borderColor: '#000',
            shadowOffsetY: 0,
            color: '#fff',
            shadowBlur: 0,
            show: true,
            inside: false,
            ellipsis: '...',
            overflow: 'none',
            borderRadius: 0,
            borderWidth: 0,
            fontSize: 10,
            lineHeight: 24,
            shadowColor: 'transparent',
            fontWeight: 'normal',
          },
          axisTick: {
            show: true,
            length: 5,
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            inside: false,
          },
          splitLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#ccc',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: true,
          },
          axisLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: true,
          },
          splitArea: {
            show: false,
            areaStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              color: 'rgba(250,250,250,0.3)',
              opacity: 1,
              shadowBlur: 10,
              shadowColor: 'rgba(0,0,0,.5)',
            },
          },
        },
        xAxis: {
          axisLabel: {
            borderType: 'solid',
            rotate: 0,
            padding: 0,
            shadowOffsetX: 0,
            margin: 4,
            backgroundColor: 'transparent',
            borderColor: '#000',
            shadowOffsetY: 0,
            color: '#fff',
            shadowBlur: 0,
            show: true,
            inside: false,
            ellipsis: '...',
            overflow: 'none',
            borderRadius: 0,
            borderWidth: 0,
            width: '',
            fontSize: 12,
            lineHeight: 24,
            shadowColor: 'transparent',
            fontWeight: 'normal',
            height: '',
          },
          axisTick: {
            show: true,
            length: 5,
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            inside: false,
          },
          splitLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: false,
          },
          axisLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: true,
          },
          splitArea: {
            show: false,
            areaStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              color: 'rgba(255,255,255,.3)',
              opacity: 1,
              shadowBlur: 10,
              shadowColor: 'rgba(0,0,0,.5)',
            },
          },
        },
        color: [
          '#5470c6',
          '#91cc75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#3ba272',
          '#fc8452',
          '#9a60b4',
          '#ea7ccc',
        ],
        legend: {
          padding: 5,
          itemGap: 10,
          shadowOffsetX: 0,
          backgroundColor: 'transparent',
          borderColor: '#ccc',
          shadowOffsetY: 0,
          orient: 'horizontal',
          shadowBlur: 0,
          bottom: 'auto',
          itemHeight: 14,
          show: true,
          icon: 'roundRect',
          borderRadius: 0,
          lineStyle: {
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            color: 'inherit',
            shadowBlur: 0,
            width: 'auto',
            type: 'inherit',
            opacity: 1,
            shadowColor: 'transparent',
          },
          left: 'right',
          borderWidth: 0,
          width: '80%',
          itemWidth: 25,
          textStyle: {
            textBorderWidth: 0,
            color: '#fff',
            textShadowColor: 'transparent',
            ellipsis: '...',
            overflow: 'none',
            fontSize: 12,
            lineHeight: 24,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
            textBorderType: 'solid',
            fontWeight: 500,
            textBorderColor: 'transparent',
            textShadowBlur: 0,
          },
          shadowColor: 'rgba(0,0,0,.3)',
          height: 'auto',
        },
        grid: { left: 100, containLabel: true },
        series: {
          symbol: 'emptyCircle',
          itemStyle: {
            borderType: 'solid',
            shadowOffsetX: 0,
            borderColor: '#fff',
            shadowOffsetY: 0,
            color: '',
            shadowBlur: 0,
            borderWidth: 0,
            opacity: 1,
            shadowColor: '#000',
          },
          showSymbol: true,
          lineStyle: {
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            color: '',
            shadowBlur: 0,
            width: 2,
            type: 'solid',
            opacity: 1,
            shadowColor: '#000',
          },
          symbolSize: 4,
        },
        title: {
          borderType: 'solid',
          padding: 2,
          shadowOffsetX: 0,
          backgroundColor: 'transparent',
          borderColor: '#ccc',
          shadowOffsetY: 0,
          shadowBlur: 0,
          bottom: 'auto',
          show: true,
          right: 'auto',
          top: 'auto',
          borderRadius: 0,
          left: 'left',
          borderWidth: 0,
          textStyle: {
            textBorderWidth: 0,
            color: '#fff',
            textShadowColor: 'transparent',
            fontSize: 14,
            lineHeight: 24,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
            textBorderType: 'solid',
            fontWeight: 500,
            textBorderColor: '#ccc',
            textShadowBlur: 0,
          },
          shadowColor: 'transparent',
        },
        base: { animate: true, interval: 3000 },
      },
      pie: {
        backgroundColor: 'transparent',
        yAxis: {
          axisLabel: {
            borderType: 'solid',
            rotate: 0,
            padding: 0,
            shadowOffsetX: 0,
            margin: 15,
            backgroundColor: 'transparent',
            borderColor: '#000',
            shadowOffsetY: 0,
            color: '#fff',
            shadowBlur: 0,
            show: true,
            inside: false,
            ellipsis: '...',
            overflow: 'none',
            borderRadius: 0,
            borderWidth: 0,
            width: '',
            fontSize: 12,
            lineHeight: 24,
            shadowColor: 'transparent',
            fontWeight: 'normal',
            height: '',
          },
          axisTick: {
            show: true,
            length: 5,
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            inside: false,
          },
          splitLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#ccc',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: true,
          },
          axisLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: true,
          },
          splitArea: {
            show: false,
            areaStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              color: 'rgba(250,250,250,0.3)',
              opacity: 1,
              shadowBlur: 10,
              shadowColor: 'rgba(0,0,0,.5)',
            },
          },
        },
        xAxis: {
          axisLabel: {
            borderType: 'solid',
            rotate: 0,
            padding: 0,
            shadowOffsetX: 0,
            margin: 4,
            backgroundColor: 'transparent',
            borderColor: '#000',
            shadowOffsetY: 0,
            color: '#fff',
            shadowBlur: 0,
            show: true,
            inside: false,
            ellipsis: '...',
            overflow: 'none',
            borderRadius: 0,
            borderWidth: 0,
            width: '',
            fontSize: 12,
            lineHeight: 24,
            shadowColor: 'transparent',
            fontWeight: 'normal',
            height: '',
          },
          axisTick: {
            show: true,
            length: 5,
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            inside: false,
          },
          splitLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: false,
          },
          axisLine: {
            lineStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cap: 'butt',
              color: '#fff',
              shadowBlur: 0,
              width: 1,
              type: 'solid',
              opacity: 1,
              shadowColor: 'rgba(0,0,0,.5)',
            },
            show: true,
          },
          splitArea: {
            show: false,
            areaStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              color: 'rgba(255,255,255,.3)',
              opacity: 1,
              shadowBlur: 10,
              shadowColor: 'rgba(0,0,0,.5)',
            },
          },
        },
        color: [
          '#5470c6',
          '#91cc75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#3ba272',
          '#fc8452',
          '#9a60b4',
          '#ea7ccc',
        ],
        legend: {
          padding: 0,
          itemGap: 10,
          shadowOffsetX: 0,
          backgroundColor: 'transparent',
          borderColor: '#ccc',
          shadowOffsetY: 0,
          orient: 'horizontal',
          shadowBlur: 0,
          bottom: 'auto',
          itemHeight: 14,
          show: true,
          icon: 'roundRect',
          borderRadius: 0,
          lineStyle: {
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            color: 'inherit',
            shadowBlur: 0,
            width: 'auto',
            type: 'inherit',
            opacity: 1,
            shadowColor: 'transparent',
          },
          left: 'right',
          borderWidth: 0,
          width: '80%',
          itemWidth: 25,
          textStyle: {
            textBorderWidth: 0,
            color: '#fff',
            textShadowColor: 'transparent',
            ellipsis: '...',
            overflow: 'none',
            fontSize: 12,
            lineHeight: 24,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
            textBorderType: 'solid',
            fontWeight: 500,
            textBorderColor: 'transparent',
            textShadowBlur: 0,
          },
          shadowColor: 'rgba(0,0,0,.3)',
          height: 'auto',
        },
        grid: { left: '100', containLabel: true },
        series: {
          symbol: 'emptyCircle',
          itemStyle: {
            borderType: 'solid',
            shadowOffsetX: 0,
            borderColor: '#fff',
            shadowOffsetY: 0,
            color: '',
            shadowBlur: 0,
            borderWidth: 0,
            opacity: 1,
            shadowColor: '#000',
          },
          showSymbol: true,
          top: 40,
          lineStyle: {
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            color: '',
            shadowBlur: 0,
            width: 2,
            type: 'solid',
            opacity: 1,
            shadowColor: '#000',
          },
          symbolSize: 4,
        },
        title: {
          borderType: 'solid',
          padding: 0,
          shadowOffsetX: 0,
          backgroundColor: 'transparent',
          borderColor: '#ccc',
          shadowOffsetY: 0,
          shadowBlur: 0,
          bottom: 'auto',
          show: true,
          right: 'auto',
          top: 'auto',
          borderRadius: 0,
          left: 'left',
          borderWidth: 0,
          textStyle: {
            textBorderWidth: 0,
            color: '#fff',
            textShadowColor: 'transparent',
            fontSize: 14,
            lineHeight: 24,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
            textBorderType: 'solid',
            fontWeight: 500,
            textBorderColor: '#ccc',
            textShadowBlur: 0,
          },
          shadowColor: 'transparent',
        },
      },
      myChart0: null,
      boardDataList: [],
      dates: '',
    }
  },
  mounted() {
    this.init()
  },
  created() {
    this.$nextTick(() => {
      this.times()
    })
  },
  methods: {
    myChartInterval(type, xAxisData, seriesData, myChart) {
      this.$nextTick(() => {
        setInterval(() => {
          let xAxis = xAxisData.shift()
          xAxisData.push(xAxis)
          let series = seriesData.shift()
          seriesData.push(series)

          if (type == 1) {
            myChart.setOption({
              xAxis: [
                {
                  data: xAxisData,
                },
              ],
              series: [
                {
                  data: seriesData,
                },
              ],
            })
          }
          if (type == 2) {
            myChart.setOption({
              yAxis: [
                {
                  data: xAxisData,
                },
              ],
              series: [
                {
                  data: seriesData,
                },
              ],
            })
          }
        }, 3000)
      })
    },
    wordclouds(wordcloudData, echartsId) {
      let wordcloud = {
        maskImage:
          '',
        option: {
          tooltip: { show: false },
          backgroundColor: 'transparent',
          series: [
            {
              sizeRange: [9, 32],
              layoutAnimation: true,
              shape: 'circle',
              data: [
                { name: '花鸟市场', value: 1446 },
                { name: '汽车', value: 928 },
                { name: '视频', value: 906 },
                { name: '电视', value: 825 },
                { name: 'Lover Boy 88', value: 514 },
                { name: '动漫', value: 486 },
                { name: '音乐', value: 53 },
                { name: '直播', value: 163 },
                { name: '广播电台', value: 86 },
                { name: '戏曲曲艺', value: 17 },
                { name: '演出票务', value: 6 },
                { name: '给陌生的你听', value: 1 },
                { name: '资讯', value: 1437 },
                { name: '商业财经', value: 422 },
                { name: '娱乐八卦', value: 353 },
                { name: '军事', value: 331 },
                { name: '科技资讯', value: 313 },
                { name: '社会时政', value: 307 },
                { name: '时尚', value: 43 },
                { name: '网络奇闻', value: 15 },
                { name: '旅游出行', value: 438 },
                { name: '景点类型', value: 957 },
                { name: '国内游', value: 927 },
                { name: '远途出行方式', value: 908 },
                { name: '酒店', value: 693 },
                { name: '关注景点', value: 611 },
                { name: '旅游网站偏好', value: 512 },
                { name: '出国游', value: 382 },
                { name: '交通票务', value: 312 },
                { name: '旅游方式', value: 187 },
                { name: '旅游主题', value: 163 },
                { name: '港澳台', value: 104 },
                { name: '本地周边游', value: 3 },
                { name: '小卖家', value: 1331 },
                { name: '全日制学校', value: 941 },
                { name: '基础教育科目', value: 585 },
                { name: '考试培训', value: 473 },
                { name: '语言学习', value: 358 },
                { name: '留学', value: 246 },
                { name: 'K12课程培训', value: 207 },
                { name: '艺术培训', value: 194 },
                { name: '技能培训', value: 104 },
                { name: 'IT培训', value: 87 },
                { name: '高等教育专业', value: 63 },
                { name: '家教', value: 48 },
                { name: '体育培训', value: 23 },
                { name: '职场培训', value: 5 },
                { name: '金融财经', value: 1328 },
                { name: '银行', value: 765 },
                { name: '股票', value: 452 },
                { name: '保险', value: 415 },
                { name: '贷款', value: 253 },
                { name: '基金', value: 211 },
                { name: '信用卡', value: 180 },
                { name: '外汇', value: 138 },
                { name: 'P2P', value: 116 },
                { name: '贵金属', value: 98 },
                { name: '债券', value: 93 },
                { name: '网络理财', value: 92 },
                { name: '信托', value: 90 },
                { name: '征信', value: 76 },
                { name: '期货', value: 76 },
                { name: '公积金', value: 40 },
                { name: '银行理财', value: 36 },
                { name: '银行业务', value: 30 },
                { name: '典当', value: 7 },
                { name: '海外置业', value: 1 },
                { name: '汽车', value: 1309 },
                { name: '汽车档次', value: 965 },
                { name: '汽车品牌', value: 900 },
                { name: '汽车车型', value: 727 },
                { name: '购车阶段', value: 461 },
                { name: '二手车', value: 309 },
                { name: '汽车美容', value: 260 },
                { name: '新能源汽车', value: 173 },
                { name: '汽车维修', value: 155 },
                { name: '租车服务', value: 136 },
                { name: '车展', value: 121 },
                { name: '违章查询', value: 76 },
                { name: '汽车改装', value: 62 },
                { name: '汽车用品', value: 37 },
                { name: '路况查询', value: 32 },
                { name: '汽车保险', value: 28 },
                { name: '陪驾代驾', value: 4 },
                { name: '网络购物', value: 1275 },
                { name: '做我的猫', value: 1088 },
                { name: '只想要你知道', value: 907 },
                { name: '团购', value: 837 },
                { name: '比价', value: 201 },
                { name: '海淘', value: 195 },
                { name: '移动APP购物', value: 179 },
                { name: '支付方式', value: 119 },
                { name: '代购', value: 43 },
                { name: '体育健身', value: 1234 },
                { name: '体育赛事项目', value: 802 },
                { name: '运动项目', value: 405 },
                { name: '体育类赛事', value: 337 },
                { name: '健身项目', value: 199 },
                { name: '健身房健身', value: 78 },
                { name: '运动健身', value: 77 },
                { name: '家庭健身', value: 36 },
                { name: '健身器械', value: 29 },
                { name: '办公室健身', value: 3 },
                { name: '商务服务', value: 1201 },
                { name: '法律咨询', value: 508 },
                { name: '化工材料', value: 147 },
                { name: '广告服务', value: 125 },
                { name: '会计审计', value: 115 },
                { name: '人员招聘', value: 101 },
                { name: '印刷打印', value: 66 },
                { name: '知识产权', value: 32 },
                { name: '翻译', value: 22 },
                { name: '安全安保', value: 9 },
                { name: '公关服务', value: 8 },
                { name: '商旅服务', value: 2 },
                { name: '展会服务', value: 2 },
                { name: '特许经营', value: 1 },
                { name: '休闲爱好', value: 1169 },
                { name: '收藏', value: 412 },
                { name: '摄影', value: 393 },
                { name: '温泉', value: 230 },
                { name: '博彩彩票', value: 211 },
                { name: '美术', value: 207 },
                { name: '书法', value: 139 },
                { name: 'DIY手工', value: 75 },
                { name: '舞蹈', value: 23 },
                { name: '钓鱼', value: 21 },
                { name: '棋牌桌游', value: 17 },
                { name: 'KTV', value: 6 },
                { name: '密室', value: 5 },
                { name: '采摘', value: 4 },
                { name: '电玩', value: 1 },
                { name: '真人CS', value: 1 },
                { name: '轰趴', value: 1 },
                { name: '家电数码', value: 1111 },
                { name: '手机', value: 885 },
                { name: '电脑', value: 543 },
                { name: '大家电', value: 321 },
                { name: '家电关注品牌', value: 253 },
                { name: '网络设备', value: 162 },
                { name: '摄影器材', value: 149 },
                { name: '影音设备', value: 133 },
                { name: '办公数码设备', value: 113 },
                { name: '生活电器', value: 67 },
                { name: '厨房电器', value: 54 },
                { name: '智能设备', value: 45 },
                { name: '个人护理电器', value: 22 },
                { name: '服饰鞋包', value: 1047 },
                { name: '服装', value: 566 },
                { name: '饰品', value: 289 },
                { name: '鞋', value: 184 },
                { name: '箱包', value: 168 },
                { name: '奢侈品', value: 137 },
                { name: '母婴亲子', value: 1041 },
                { name: '孕婴保健', value: 505 },
                { name: '母婴社区', value: 299 },
                { name: '早教', value: 103 },
                { name: '奶粉辅食', value: 66 },
                { name: '童车童床', value: 41 },
                { name: '关注品牌', value: 271 },
                { name: '宝宝玩乐', value: 30 },
                { name: '母婴护理服务', value: 25 },
                { name: '纸尿裤湿巾', value: 16 },
                { name: '妈妈用品', value: 15 },
                { name: '宝宝起名', value: 12 },
                { name: '童装童鞋', value: 9 },
                { name: '胎教', value: 8 },
                { name: '宝宝安全', value: 1 },
                { name: '宝宝洗护用品', value: 1 },
                { name: '软件应用', value: 1018 },
                { name: '系统工具', value: 896 },
                { name: '理财购物', value: 440 },
                { name: '生活实用', value: 365 },
                { name: '影音图像', value: 256 },
                { name: '社交通讯', value: 214 },
                { name: '手机美化', value: 39 },
                { name: '办公学习', value: 28 },
                { name: '应用市场', value: 23 },
                { name: '母婴育儿', value: 14 },
                { name: '游戏', value: 946 },
                { name: '手机游戏', value: 565 },
                { name: 'PC游戏', value: 353 },
                { name: '网页游戏', value: 254 },
                { name: '游戏机', value: 188 },
                { name: '模拟辅助', value: 166 },
                { name: '个护美容', value: 942 },
                { name: '护肤品', value: 177 },
                { name: '彩妆', value: 133 },
                { name: '美发', value: 80 },
                { name: '香水', value: 50 },
                { name: '个人护理', value: 46 },
                { name: '美甲', value: 26 },
                { name: 'SPA美体', value: 21 },
                { name: '花鸟萌宠', value: 914 },
                { name: '绿植花卉', value: 311 },
                { name: '狗', value: 257 },
                { name: '其他宠物', value: 131 },
                { name: '水族', value: 125 },
                { name: '猫', value: 122 },
                { name: '动物', value: 81 },
                { name: '鸟', value: 67 },
                { name: '宠物用品', value: 41 },
                { name: '宠物服务', value: 26 },
                { name: '书籍阅读', value: 913 },
                { name: '网络小说', value: 483 },
                { name: '关注书籍', value: 128 },
                { name: '文学', value: 105 },
                { name: '报刊杂志', value: 77 },
                { name: '人文社科', value: 22 },
                { name: '建材家居', value: 907 },
                { name: '装修建材', value: 644 },
                { name: '家具', value: 273 },
                { name: '家居风格', value: 187 },
                { name: '家居家装关注品牌', value: 140 },
                { name: '家纺', value: 107 },
                { name: '厨具', value: 47 },
                { name: '灯具', value: 43 },
                { name: '家居饰品', value: 29 },
                { name: '家居日常用品', value: 10 },
                { name: '生活服务', value: 883 },
                { name: '物流配送', value: 536 },
                { name: '家政服务', value: 108 },
                { name: '摄影服务', value: 49 },
                { name: '搬家服务', value: 38 },
                { name: '物业维修', value: 37 },
                { name: '婚庆服务', value: 24 },
                { name: '二手回收', value: 24 },
                { name: '鲜花配送', value: 3 },
                { name: '维修服务', value: 3 },
                { name: '殡葬服务', value: 1 },
                { name: '求职创业', value: 874 },
                { name: '创业', value: 363 },
                { name: '目标职位', value: 162 },
                { name: '目标行业', value: 50 },
                { name: '兼职', value: 21 },
                { name: '期望年薪', value: 20 },
                { name: '实习', value: 16 },
                { name: '雇主类型', value: 10 },
                { name: '星座运势', value: 789 },
                { name: '星座', value: 316 },
                { name: '算命', value: 303 },
                { name: '解梦', value: 196 },
                { name: '风水', value: 93 },
                { name: '面相分析', value: 47 },
                { name: '手相', value: 32 },
                { name: '公益', value: 90 },
              ],
              keepAspect: false,
              type: 'wordCloud',
              rotationRange: [-90, 90],
              gridSize: 8,
              shrinkToFit: false,
              top: 'center',
              left: 'center',
              width: '80%',
              emphasis: {
                focus: 'self',
                textStyle: { textShadowColor: '#333', textShadowBlur: 4 },
              },
              drawOutOfBound: false,
              rotationStep: 45,
              textStyle: {
                color:
                  'function(){return"rgb("+[Math.round(160*Math.random()),Math.round(160*Math.random()),Math.round(160*Math.random())].join(",")+")"}',
                fontWeight: 500,
                fontFamily: 'sans-serif',
              },
              height: '80%',
              maskImage: {},
            },
          ],
        },
      }
      wordcloud = JSON.parse(JSON.stringify(wordcloud), (k, v) => {
        if (typeof v == 'string' && v.indexOf('function') > -1) {
          return eval('(function(){return ' + v + ' })()')
        }
        return v
      })
      wordcloud.option.series[0].data = wordcloudData

      this.myChart0 = echarts.init(document.getElementById(echartsId))
      let myChart = this.myChart0
      let img = wordcloud.maskImage

      if (img) {
        var maskImage = new Image()
        maskImage.src = img
        maskImage.onload = function () {
          wordcloud.option.series[0].maskImage = maskImage
          myChart.clear()
          myChart.setOption(wordcloud.option)
        }
      } else {
        delete wordcloud.option.series[0].maskImage
        myChart.clear()
        myChart.setOption(wordcloud.option)
      }
    },
    getTimeStrToDay(game_over_timestamp) {
      if (game_over_timestamp == 0) return ''
      var date = new Date(parseInt(game_over_timestamp))
      var now = new Date()
      var hours =
        date.getHours() >= 10
          ? date.getHours().toString()
          : '0' + date.getHours()
      var minutes =
        date.getMinutes() >= 10
          ? date.getMinutes().toString()
          : '0' + date.getMinutes()
      var seconds =
        date.getSeconds() >= 10
          ? date.getSeconds().toString()
          : '0' + date.getSeconds()
      let arr = ['日', '一', '二', '三', '四', '五', '六']
      let d = arr[date.getDay()]
      return (
        date.getFullYear() +
        '年' +
        (date.getMonth() + 1) +
        '月' +
        date.getDate() +
        '日' +
        ' ' +
        ' ' +
        '星期' +
        d +
        ' ' +
        '  ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      )
    },
    times() {
      setInterval(() => {
        let date = new Date().getTime()
        this.dates = this.getTimeStrToDay(date)
      }, 1000)
    },
    filterTime(time) {
      const date = new Date(time)
      const Y = date.getFullYear()
      const M =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()

      const H = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() // 小时
      const I =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() // 分钟
      const S =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() // 秒

      return `${Y}-${M}-${D} ${H}:${I}:${S}`
    },
    init() {
      if (this.$storage.get('Token')) {
        this.$http({
          url: `${this.$storage.get('sessionTable')}/session`,
          method: 'get',
        }).then(({ data }) => {
          if (data && data.code != 0) {
            router.push({ name: 'login' })
          }
        })
      } else {
        router.push({ name: 'login' })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.cardView {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .cards {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    justify-content: center;
    .card {
      width: calc(25% - 20px);
      margin: 0 10px;
      /deep/.el-card__body {
        padding: 0;
      }
    }
  }
}
</style>
